﻿<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style type="text/css">
      body,html,#container{
        height: 100%;
        margin: 10px;
        font:12px Arial;
      }
      .taiwan{
      	border: solid 1px cyan;
      	color: blue;
      	float: left;
      	width: 50px;
      	background-color: rgba(255,0,0,0.1)
      }
    </style>
    <title>Marker 所有省份</title>
  </head>
  <body>
   <div id="container" tabindex="0"></div>
   <!--
   <script src="https://webapi.amap.com/js/marker.js"></script>
   -->
   <script src="statecapitals.js"></script>
   <script src="https://webapi.amap.com/maps?v=1.4.2&key=02a37b38c4b33a671f1cd1584b54adc8"></script>
   <script type="text/javascript">

        var map = new AMap.Map('container',{resizeEnable: true,zoom:4});
        var markers = []; //province见Demo引用的JS文件
        for (var i = 0; i < provinces.length; i += 1) {
    			var marker;
    			if (provinces[i].type === 0) {
    				var icon = new AMap.Icon({
    					image: 'https://vdata.amap.com/icons/b18/1/2.png',
    					size: new AMap.Size(24, 24)
    				});
    				marker = new AMap.Marker({
    					icon: icon,
    					position: provinces[i].center.split(','),
    					offset: new AMap.Pixel(-12,-12),
    					zIndex: 101,
    					title: "首都" + provinces[i].name,
    					map: map
    				});
    			} else {
    				marker = new AMap.Marker({
    					position: provinces[i].center.split(','),
    					title: provinces[i].name,
    					map: map
    				});
    				var content= "<div class = 'taiwan'>" + provinces[i].name + "</div>";
      				baodao = new AMap.Marker({
      					content: content,
      					position: provinces[i].center.split(','),
      					title: provinces[i].name,
      					offset: new AMap.Pixel(0,0),
      					map: map
      				});
            if (provinces[i].type === 12) {
      				var content= "<div class = 'taiwan'>宝岛台湾</div>";
      				baodao = new AMap.Marker({
      					content: content,
      					position: provinces[i].center.split(','),
      					title: provinces[i].name,
      					offset: new AMap.Pixel(0,0),
      					map: map
      				});
            }
    			}
    			markers.push(marker);
    		}
			  map.setFitView();
    </script>
    <script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
  </body>
</html>